<template>
	<view>
		<uni-drawer ref="showRight" mode="right" :width="320" >
			<!-- 一般用法 -->
			<uni-list>
				<uni-list-item title="菜单项1" :show-arrow="true"></uni-list-item>
				<uni-list-item title="菜单项2" :show-arrow="true"></uni-list-item>
				<uni-list-item title="菜单项3" :show-arrow="true"></uni-list-item>
				<uni-list-item title="菜单项3" :show-arrow="true"></uni-list-item>
			</uni-list>
			<view class="close">
				<button @click="closeDrawer('showRight')">关闭</button>
			</view>
		</uni-drawer>
		<uni-list >
			<uni-list-item  v-for="(item,index) in list" :key="index" :title="item.title" :show-arrow="true"></uni-list-item>
		</uni-list>
		<uni-load-more :status="more" @clickLoadMore="clickLoadMore"></uni-load-more>
	</view>
</template>

<script> 
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
			uniDrawer,
			uniList,
			uniListItem,
			uniLoadMore
		},
		data() {
			return {
				showRight: false,
				more:"more",
				list : []
			}
		},
		methods: {
			closeDrawer(e){
				this.$refs[e].close()
			},
			clickLoadMore(e) {
				uni.showToast({
					icon: 'none',
					title: "当前状态：" + e.detail.status
				})
			},
			getList(){
				for(var i = 0; i<20 ; i++ ){
					this.list.push({title: '' + (i+1)}) 
				}
				this.more = 'more'
			}
		},
		onReady() {
			this.getList()
		},
		onNavigationBarButtonTap(e) { // 设置按钮
			if (this.showRight) {
				this.$refs.showRight.close()
			} else {
				this.$refs.showRight.open()
			}
		},
		onPullDownRefresh(){ // 下拉
			this.list = []
			this.more = 'loading'
			this.getList()
			uni.stopPullDownRefresh() 
		},
		onReachBottom(){	// 上划
			this.more = 'loading'
			if(this.list.length > 40){
				this.more = 'noMore'
			}else{
				this.getList()
			}
		}
	}
</script>
	
<style>
	.content{
		display: flex;
		min-height: 100%;
		height: 300px;
	}
	.scroll-view-item{
		height:400px
	}
</style>
